gmaps.js สร้าง Map บนเว็บไซต์ไม่ได้ยากอย่างที่คิด

September 17, 2015 4:43 pm Google Map

หลายๆคนถ้าพูดถึงการสร้างแผนที่บนเว็บไซต์ และนำมาประยุกต์ในการแสดงผลข้อมูล GIS ของระบบงานตัวเอง คงจะนึกถึง Google Map API กันนะครับ แต่เนื่องจาก Google Map API นั้นค่อนข้างเขียนยาก และนำมาใช้กับการดึงข้อมูลผ่าน Ajax (jQuery) ค่อนข้างลำบาก วันนี้เราจะมารู้จัก Library อีกตัวนึงชื่อว่า “gmaps.js”

gmaps.js เป็น Javascript Library ที่ช่วยให้เราสร้างและเรียกใช้งาน Google Map API ได้ง่ายขึ้น โดย Concept ของตัว gmaps.js จะเขียน Style jQuery ครับ ทำให้เราเข้าใจง่าย เขียนใช้งานง่ายมากๆครับ โดยตัว gmaps.js นั้น คลอบคลุมทุก Function พื้นฐานใน Google Map API และรองรับ API Version 3.0 ด้วยครับ

เรามาลองดู Code ที่ใช้ในการเรียก Google Map ขึ้นมาทำงานกันครับ ระหว่าง Native Google Map API กับ gmaps.js

Native Google Map API

gmaps.js

จะเห็นว่า gmaps.js และ Native Google Map API นั้นเขียน Code ที่ยาวพอๆกัน แต่ทาง gmaps.js จะสื่อได้ง่ายกว่า เข้าใจง่ายกว่า ต่อไปเราจะมาเขียน Function ที่ใช้ในการเอา JSON จาก Web Service มาสร้างเป็น Markers ลงในแผนที่กันครับ

Native Google Map API

gmaps.js


จะเห็นว่า gmaps.js ใช้ Code เข้าใจง่ายกว่า เขียนได้ง่ายกว่า ทำให้เราจัดการ Google Map ในเว็บไซต์ของเราได้ง่ายขึ้น แต่ถ้าพูดถึงความยืดหยุ่นแล้ว ต้องยกให้ Native Google Map API ครับ เพราะเราสามารถปรับแต่งได้มากกว่า แต่สำหรับผู้ที่ต้องการความรวดเร็วในการพัฒนา ใช้งานง่าย ไม่ซับซ้อน gmaps.js ก็เป็นทางเลือกที่ดีอีกทางนึงครับ

gmaps.js web site